<template>
  <view class="page">
    <YgSearch/>
    <view class="main">
      <view class="left">
        <view
          class="item"
          v-for="(item, index) in titleList"
          :key="index"
          @click="changeCate(index)"
        >
          <view class="name" :class="{active: index === currentIndex}">
            {{item}}
          </view>
        </view>
      </view>
      <view class="right">
        <sub-cate-floor 
          v-for="item in subCateList"
          :key="item.cat_id"
          :data="item"
        />
      </view>
    </view>
  </view>
</template>

<script>
import subCateFloor from './components/subCate.Floor.vue'
export default {
  components: { subCateFloor },
  data() {
    return {
      // 为了渲染效率, 在data中只定义需要渲染的数据
      // 左侧标题列表
      titleList: [],
      subCateList: [],
      // 右侧当前激活项子分类
      currentIndex: 0
    }
  },
  onLoad() {
    this.getCategory()
  },
  methods: {
    async getCategory() {
      const {message} = await this.$u.get("/categories")
      console.log(message);
      this.categoryList = message
      // this.categoryList 现在已经没有绑定到data中
      // 所以也不会触发渲染, 需要手动算出渲染的其他数据
      this.titleList = this.categoryList.map(item=>item.cat_name)
      this.subCateList = this.categoryList[this.currentIndex].children
    },
    changeCate(index) {
      this.currentIndex = index
      this.subCateList = this.categoryList[this.currentIndex].children
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  display: flex;
  overflow: hidden;
  .left {
    background: #F3F3F3;
    overflow: auto;
    width: 182rpx;
    font-size: 28rpx;
    text-align: center;
    color: #585858;
    .item {
      padding: 18rpx 0;
    }
    .active {
      color: $theme-color;
      font-weight: bold;
      border-left: 4rpx solid $theme-color;
      border-right: 4rpx solid transparent;
    }
  }
  .right {
    flex: 1;
    overflow: auto;
  }
}

</style>